<template>
<!--   我的页 个人信息：头像，昵称，个性签名-->
    <div class="mineMessage" style="position:relative;">
        <div style="height: 150%;width: 100%;position:absolute;">
            <img :src=$store.state.data.avatar||url alt="" class="bgi-img">
        </div>
        <van-row style="position: absolute;z-index: 99;width: 354px;height: 162px;">
<!--            <van-col span="2"></van-col>-->
            <van-col span="10">
                <div class="avatar">
                    <img :src=$store.state.data.avatar||url alt="">
                </div>
            </van-col>
<!--            <van-col span="2"></van-col>-->
            <van-col span="12">
                <p style="font-size: 24px;margin-top: 35px;overflow:hidden;width: 100%;text-overflow:ellipsis;">{{$store.state.data.userName}}</p>
                <p style="font-size: 20px;margin-top: 15px;overflow:hidden;width: 100%;text-overflow:ellipsis;">{{$store.state.data.remark}}</p>
            </van-col>
        </van-row>

    </div>
</template>

<script>
    export default {
        name: "MineMessage",
        data(){
            return{
                url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3489251037,1613284493&fm=26&gp=0.jpg'
            }
        }
    }
</script>

<style scoped lang="less">
    .mineMessage{
        width: 95%;
        height: 150px;
        background-color: #eee;
        padding: 1vm;
        margin: 10px auto;
    }
    .avatar{
        margin-top: 6px;
        border-radius: 50%;
        /*width: 120px;*/
        /*height: 120px;*/
        overflow: hidden;
        img{
            width: 120px;
            height: 120px;
        }
    }
    .info{
        width: 95%;
        background-color: #eee;
    }
    .bgi-img {
        position: fixed;
        width: 100%;
        left: 0;
        height: 100%;
        filter: blur(35px);
    }

</style>